<!--笔记本详情页主要内容1  -->
<template>
  <div class="computerNR1">
     <div class="box">
           <h1>热销爆款</h1>
           <div class="box-nr">
          <div class="box-left">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/25a5c189a69c14063d83a381bdaadd73.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">曲面显示器 34英寸</p>
                  <p class="p2">超宽大环绕显示屏</p>
              </div>
              <div class="word-right">
                  <p class="p3">￥2399起</p>
                   <router-link to="/Moer"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      <div class="right">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9b7352061572c38675eae00dc2d16de9.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">小米显示器1A 23.8英寸</p>
                  <p class="p2">高清画质，超广视角</p>
              </div>
              <div class="word-right">
                  <p class="p3">￥929起</p>
                  <router-link to="/Moer"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"computerNR1",
  data () {
    return {
    };
  },

  components: {},
}

</script>
<style lang='less' scoped>
.computerNR1{
     background-color: rgb(240, 235, 235);
     padding: 10px;
}
.box{
  width: 1250px;
  margin-right: auto;
  margin-left: auto;
}

.box-nr{
    display: flex;
    justify-content: space-between;
}
.box-left{
    cursor: pointer;
  transition: all 0.6s;
  &:hover{
    transform: scale(1.08);
    box-shadow: 0px 0px 18px rgba(0,0,0,0.5);
  }
}
.right{
    cursor: pointer;
  transition: all 0.6s;
  &:hover{
    transform: scale(1.08);
    box-shadow: 0px 0px 18px rgba(0,0,0,0.5);
  }
}
.box h1{
    font-size: 20px;
    margin: 10px 0;
}
.box img{
    border: 0;
    width: 500px;
    height: 300px;
    background-color: #E6E6E6;
}
.word{
    width: 500px;
    display: flex;
    justify-content: space-between;
    margin: -3px 0;
    background-color: #fff;
    padding: 20px 0;
}
.word .p1{
    margin-left: 10px;
    font-size: 22px;
}
.word .p2{
    color: #666666;
    margin-top: 10px;
    margin-left: 10px;
}
.word .p3{
    font-size: 22px;
    color: #EA625B;
    text-align: center;
}
.word button{
    background-color: #fd5452;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 12px;
    border: none;
    color: aliceblue;
    margin-right: 10px;
      &:hover {
    background-color: orangered;
  }
}
</style>